<template>
  <div class="auth-manage-container">
    <h1 class="page-title">🔑 权限管理</h1>

    <el-tabs v-model="activeTab" type="border-card">
      <!-- 用户管理 -->
      <el-tab-pane label="用户管理" name="users">
        <el-button type="success" icon="el-icon-plus" @click="handleAddUser" style="margin-bottom: 15px;">
          新增用户
        </el-button>

        <el-table :data="userList" v-loading="loading">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="role" label="角色">
            <template slot-scope="scope">
              <el-tag :type="getRoleTypeTag(scope.row.role)">{{ scope.row.roleName }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.status" active-value="active" inactive-value="inactive"
                         @change="handleUserStatusChange(scope.row)">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleEditUser(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDeleteUser(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 角色管理 -->
      <el-tab-pane label="角色管理" name="roles">
        <el-button type="success" icon="el-icon-plus" @click="handleAddRole" style="margin-bottom: 15px;">
          新增角色
        </el-button>

        <el-table :data="roleList">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="name" label="角色名称"></el-table-column>
          <el-table-column prop="code" label="角色编码"></el-table-column>
          <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleEditRole(scope.row)">编辑</el-button>
              <el-button size="mini" type="primary" @click="handleSetPermission(scope.row)">分配权限</el-button>
              <el-button size="mini" type="danger" @click="handleDeleteRole(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 权限管理 -->
      <el-tab-pane label="权限管理" name="permissions">
        <el-button type="success" icon="el-icon-plus" @click="handleAddPermission" style="margin-bottom: 15px;">
          新增权限
        </el-button>

        <el-table :data="permissionList" row-key="id" :tree-props="{children: 'children'}" default-expand-all>
          <el-table-column prop="name" label="权限名称" width="200"></el-table-column>
          <el-table-column prop="code" label="权限编码" width="200"></el-table-column>
          <el-table-column prop="type" label="类型" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.type === 'menu' ? 'primary' : 'success'" size="small">
                {{ scope.row.type === 'menu' ? '菜单' : '按钮' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="path" label="路径/接口" show-overflow-tooltip></el-table-column>
          <el-table-column prop="sort" label="排序" width="80"></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleEditPermission(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDeletePermission(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <!-- 分配角色对话框 -->
    <el-dialog title="分配角色" :visible.sync="roleDialogVisible" width="400px">
      <el-form label-width="80px">
        <el-form-item label="选择角色">
          <el-select v-model="selectedRoles" multiple placeholder="请选择角色" style="width: 100%">
            <el-option v-for="role in roleList" :key="role.id" :label="role.name" :value="role.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="roleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitRole">确定</el-button>
      </div>
    </el-dialog>

    <!-- 分配权限对话框 -->
    <el-dialog title="分配权限" :visible.sync="permissionDialogVisible" width="500px">
      <el-tree
        :data="permissionList"
        show-checkbox
        node-key="id"
        ref="permissionTree"
        :props="{ children: 'children', label: 'name' }">
      </el-tree>
      <div slot="footer">
        <el-button @click="permissionDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitPermission">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AuthManage',
  data () {
    return {
      activeTab: 'users',
      loading: false,
      userList: [],
      roleList: [],
      permissionList: [],
      roleDialogVisible: false,
      permissionDialogVisible: false,
      selectedRoles: []
    }
  },
  created () {
    this.loadUserList()
    this.loadRoleList()
    this.loadPermissionList()
  },
  methods: {
    loadUserList () {
      // 将来对接接口 GET /api/user/list
      this.userList = [
        { id: 1, username: '管理员', email: 'admin@example.com', phone: '13800138000', role: 'admin', roleName: '管理员', status: 'active', createTime: '2024-01-01 10:00' },
        { id: 2, username: '张三', email: 'zhangsan@example.com', phone: '13900139000', role: 'user', roleName: '普通用户', status: 'active', createTime: '2024-01-15 14:30' }
      ]
    },
    loadRoleList () {
      // 将来对接接口 GET /api/user/roles
      this.roleList = [
        { id: 1, name: '管理员', code: 'admin', description: '系统管理员，拥有所有权限', createTime: '2024-01-01 10:00' },
        { id: 2, name: '普通用户', code: 'user', description: '普通用户，基本功能权限', createTime: '2024-01-01 10:00' },
        { id: 3, name: '员工', code: 'staff', description: '员工角色，业务操作权限', createTime: '2024-01-01 10:00' }
      ]
    },
    loadPermissionList () {
      // 将来对接接口 GET /api/auth/permissions
      this.permissionList = [
        {
          id: 1,
          name: '宠物管理',
          code: 'pet',
          type: 'menu',
          path: '/admin/pet-manage',
          sort: 1,
          children: [
            { id: 11, name: '新增宠物', code: 'pet:create', type: 'button', path: '/api/pet/create', sort: 1 },
            { id: 12, name: '编辑宠物', code: 'pet:update', type: 'button', path: '/api/pet/update', sort: 2 },
            { id: 13, name: '删除宠物', code: 'pet:delete', type: 'button', path: '/api/pet/delete', sort: 3 }
          ]
        },
        {
          id: 2,
          name: '订单管理',
          code: 'order',
          type: 'menu',
          path: '/admin/order-manage',
          sort: 2,
          children: [
            { id: 21, name: '查看订单', code: 'order:view', type: 'button', path: '/api/order/list', sort: 1 },
            { id: 22, name: '处理订单', code: 'order:handle', type: 'button', path: '/api/order/status', sort: 2 }
          ]
        }
      ]
    },
    handleAddUser () {
      this.$message.info('新增用户功能')
    },
    handleEditUser (row) {
      this.$message.info(`编辑用户：${row.username}`)
    },
    handleSetRole (row) {
      this.roleDialogVisible = true
      this.selectedRoles = []
    },
    handleDeleteUser (row) {
      this.$confirm(`确认删除用户 "${row.username}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 将来对接接口 DELETE /api/user/delete/{id}
        this.$message.success('删除成功')
        this.loadUserList()
      })
    },
    handleUserStatusChange (row) {
      this.$message.success(`用户状态已${row.status === 'active' ? '启用' : '禁用'}`)
    },
    handleAddRole () {
      this.$message.info('新增角色功能')
    },
    handleEditRole (row) {
      this.$message.info(`编辑角色：${row.name}`)
    },
    handleSetPermission (row) {
      this.permissionDialogVisible = true
    },
    handleDeleteRole (row) {
      this.$confirm(`确认删除角色 "${row.name}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.loadRoleList()
      })
    },
    handleAddPermission () {
      this.$message.info('新增权限功能')
    },
    handleEditPermission (row) {
      this.$message.info(`编辑权限：${row.name}`)
    },
    handleDeletePermission (row) {
      this.$confirm(`确认删除权限 "${row.name}" 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.loadPermissionList()
      })
    },
    handleSubmitRole () {
      // 将来对接接口 PUT /api/user/role/{id}
      this.$message.success('分配成功')
      this.roleDialogVisible = false
    },
    handleSubmitPermission () {
      const checkedKeys = this.$refs.permissionTree.getCheckedKeys()
      console.log('选中的权限', checkedKeys)
      this.$message.success('分配成功')
      this.permissionDialogVisible = false
    },
    getRoleTypeTag (role) {
      const typeMap = {
        'admin': 'danger',
        'staff': 'warning',
        'user': 'success'
      }
      return typeMap[role] || 'info'
    }
  }
}
</script>

<style scoped>
.auth-manage-container {
  padding: 20px;
}

.page-title {
  margin: 0 0 20px 0;
  font-size: 24px;
  color: #333;
}
</style>
